<template>
  <div style="height: 110px" v-if="navMenu>0">
    <div class="nav-menu">
      <header v-if="navMenu>0">
        <div class="nav-container">
          <a class="logo-container" href="https://www.baidu.com">
            <img src="@/assets/logo.png" alt="">
            <p>斑马论坛</p>
          </a>
          <div class="nav-list">
            <a
                :class="{'a-active':index === navCurIndex}"
                v-for="(item,index) in navList"
                :key=" 'navList' + index"
                :href="item.href"
                @click="navCurIndex = index"
            >{{ item.title }}</a>
          </div>
        </div>
        <div class="operate-container">
          <el-input
              placeholder="搜索文章"
              v-model="searchHome"
              suffix-icon="el-icon-search"
          />
          <el-button type="primary" @click="openWindow('publish')">写文章</el-button>
          <i v-if="userInfo.avatar" class="el-icon-message-solid"></i>
          <div class="avatar-container">
            <img v-if="userInfo.avatar" class="avatar" :src="userInfo.avatar" alt="avatar" @click="clickAvatar">
<!--            <avatar v-if="userInfo.avatar" class="avatar" :src="userInfo.avatar" alt="avatar" @click="clickAvatar"/>-->
            <el-button v-else @click="$refs.loginPop.popShow = true">登录</el-button>
            <ul v-show="popShow" class="avatar-pop">
              <li class="line" @click="openWindow('publish')">
                <icon name="write" fill="#86909c" class="icon"/><span>写文章</span>
              </li>
              <li>
                <icon name="mine" fill="#86909c" class="icon"/><span>我的主页</span>
              </li>
              <li>
                <icon name="like" fill="#86909c" class="icon"/><span>我赞过的</span>
              </li>
              <li class="line">
                <icon name="collect" fill="#86909c" class="icon"/><span>我的收藏</span>
              </li>
              <li>
                <icon name="setting" fill="#86909c" class="icon"/><span>设置</span>
              </li>
              <li class="line">
                <icon name="about" fill="#86909c" class="icon"/><span>关于</span>
              </li>
              <li @click="loginOut">
                <icon name="quit" fill="#86909c" class="icon"/><span>退出登录</span>
              </li>
            </ul>
          </div>
        </div>
      </header>
      <footer v-if="navMenu>1">
        <div class="tag-list">
          <a
              :class="{'a-active':index === tagCurIndex}"
              v-for="(tag,index) in tags"
              :key=" 'tag' + index"
              :href="tag.href"
              @click="tagCurIndex = index"
          >{{ tag.title }}</a>
        </div>
        <a href="#" style="width: 100px">标签管理</a>
      </footer>
      <login-pop ref="loginPop"/>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import {
  Button, Input
} from "element-ui";
import Icon from '@/components/icon'
import LoginPop from "@/views/home/components/login-pop";

Vue.use(Button)
Vue.use(Input)
export default {
  name: "nav-menu",
  components: {LoginPop, Icon},
  props: {
    navMenu: Number
  },
  data() {
    return {
      navList: [
        {title: '首页', href: '/home'}, {title: '沸点', href: '#'}, {title: '资讯', href: '#'},
        {title: '小册', href: '#'}, {title: '活动', href: '#'},
      ],
      tags: [
        {title: '推荐', href: '#'}, {title: '关注', href: '#'}, {title: '前端', href: '#'},
        {title: '后端', href: '#'}, {title: 'Android', href: '#'}, {title: 'iOS', href: '#'},
        {title: '人工智能', href: '#'}, {title: '开发工具', href: '#'}, {title: '代码人生', href: '#'},
        {title: '阅读', href: '#'}
      ],
      searchHome: '',
      navCurIndex: 0,
      tagCurIndex: 0,
      popShow: false
    }
  },
  methods: {
    clickAvatar() {
      this.popShow = !this.popShow
    },
    openWindow(router) {
      this.popShow = false
      window.open(origin + '/#/'+router)
    },
    loginOut() {
      this.popShow = false
      Vue.prototype.userInfo = {}
      localStorage.removeItem('banma-user')
    }
  }
}
</script>

<style lang="less" scoped>

.nav-menu {
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

header {
  height: 60px;
  .flex-center(space-between);
  padding: 0 100px;
  border-bottom: 1px solid #f1f1f1;

  .nav-container {
    .flex-center();

    .logo-container {
      .flex-center();

      font-size: 24px;
      line-height: 60px;
      width: 160px;

      img {
        .size(40px);
        margin-right: 8px;
      }
    }

    .nav-list {
      font-size: 18px;
      .flex-center(space-evenly);
      line-height: 60px;
      padding: 0 10px;

      a {
        color: #86909c;
        min-width: 80px;
        text-align: center;

        &:hover{
          color: #007fff;
        }
      }
    }

  }

  .operate-container {
    .flex-center();

    .avatar-container{
      position: relative;
      .avatar {
        .size(30px);
        border-radius: 50%;
        cursor: pointer;
      }
      .avatar-pop{
        width: 150px;
        position: absolute;
        top: 40px;
        left: -100px;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-radius: 2px;
        li{
          padding: 10px 20px;
          color: #4e5969;
          font-size: 14px;
          cursor: pointer;
          .flex-center();
          &:hover{
            background-color: #f8f8f8;
          }
          .icon{
            margin-right: 10px;
          }
        }
        .line{
          border-bottom: 1px solid #eee;
        }
      }
    }


    button {
      margin: 0 20px;
    }
  }
}

footer {
  height: 50px;
  padding: 0 150px;
  .flex-center(space-between);
  border-bottom: 1px solid #f1f1f1;

  .tag-list {
    min-width: 600px;
    flex-shrink: 0;
    padding: 0 16px;
  }

  a {
    color: #86909c;
    text-align: center;
    line-height: 50px;
    flex-shrink: 0;
    padding: 0 16px;

    &:hover{
      color: #007fff;
    }
  }
}

.a-active {
  color: #007fff !important;
}

/deep/ .el-input {
  width: 200px;
}

/deep/ .el-icon-message-solid {
  font-size: 28px;
  color: #86909c;
  margin-right: 20px;
}
</style>